<template>
  <div id="app">
    <div>
      <input
        type="checkbox"
        v-model="isflag"
        @click="chooseOne(!isflag)"
      /><span @click="qie">人员</span>
    </div>
    <ul v-show="show == 0">
      <li v-for="(item, index) in list" :key="index">
        <input type="checkbox" v-model="item.flag" /> {{ item.name }}
      </li>
    </ul>
    <div>
      <input type="checkbox" v-model="isshow"  @click="chooseTwo(!isshow)"/><span @click="qie1">人员</span>
    </div>
    <ul v-show="show == 1">
      <li v-for="(item, index) in list1" :key="index">
        <input type="checkbox" v-model="item.flag" /> {{ item.name }}
      </li>
    </ul>
    <div>
      <input type="checkbox" v-model="isedit" @click="chooseThere(!isedit)"/><span @click="qie2">人员</span>
    </div>
    <ul v-show="show == 2">
      <li v-for="(item, index) in list2" :key="index">
        <input type="checkbox" v-model="item.flag" /> {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "小三", flag: false },
        { id: 2, name: "小三", flag: false },
        { id: 3, name: "小三", flag: false },
        { id: 4, name: "小三", flag: false },
      ],
      list1: [
        { id: 1, name: "小三", flag: false },
        { id: 2, name: "小三", flag: false },
        { id: 3, name: "小三", flag: false },
        { id: 4, name: "小三", flag: false },
      ],
      list2: [
        { id: 1, name: "小三", flag: false },
        { id: 2, name: "小三", flag: false },
        { id: 3, name: "小三", flag: false },
        { id: 4, name: "小三", flag: false },
      ],
      isflag: false,
      isshow: false,
      isedit: false,
      show: 0,
    };
  },
  methods: {
    qie() {
      this.show = 0;
    },
    qie1() {
      this.show = 1;
    },
    qie2() {
      this.show = 2;
    },
    chooseOne(flag) {
      this.list.forEach((item) => {
        item.flag = flag;
      });
    },
    chooseTwo(flag) {
      this.list1.forEach((item) => {
        item.flag = flag;
      });
    },
    chooseThere(flag) {
      this.list2.forEach((item) => {
        item.flag = flag;
      });
    },
  },
  watch: {
    list: {
      handler(val) {
        if (val.filter((item) => item.flag == true).length == val.length) {
          this.isflag = true;
        } else {
          this.isflag = false;
        }
      },
      deep: true,
      immediate: true,
    },
    list1: {
      handler(val) {
        if (val.filter((item) => item.flag == true).length == val.length) {
          this.isshow = true;
        } else {
          this.isshow = false;
        }
      },
      deep: true,
      immediate: true,
    },
    list2: {
      handler(val) {
        if (val.filter((item) => item.flag == true).length == val.length) {
          this.isedit = true;
        } else {
          this.isedit = false;
        }
      },
      deep: true,
      immediate: true,
    }
  },
};
</script>


